<template>
  <div class="bottom">
    <div class="sect">
      <div class="shop">
        <i class="iconfont icon-dianpu"></i>
        <p>店铺</p>
      </div>
      <div class="collect" @click="collect">
        <i class="iconfont icon-aixin" v-show="isCollect"></i>
        <i class="iconfont icon-aixin1" v-show="!isCollect"></i>
        <p>收藏</p>
      </div>
      <!-- <router-link tag="div" to="/car" class="car">
        <i class="iconfont icon-gouwuche"></i>
        <span v-if="carNum > 0">{{ carNum }}</span>
        <p>购物车</p>
      </router-link> -->
      <div class="car" @click="$router.push({ path: '/car' })">
        <i class="iconfont icon-gouwuche"></i>
        <span v-if="carNum > 0">{{ goodsList.length }}</span>
        <p>购物车</p>
      </div>
    </div>
    <div class="btn">
      <!-- <div class="buy" @click="$router.push({ path:'/orderForm',query:{id:id}})">立即购买</div> -->
      <div class="buy" @click="goOrderFun">立即购买</div>
      <div class="addCar" @click="addGoodsList">加入购物车</div>
    </div>
  </div>
</template>

<script>
export default {
  props:["colect","id","value"],
  data() {
    return {
      isCollect: true,
      carNum: 0,
      goodsList: [],
      currentId:null,
    };
  },
  created() {
    // console.log(this.goodsDetail);
    this.goodsList = this.colect;
    this.carNum = this.goodsList.length
    // console.log(this.goodsList);
    this.currentId = this.id;
  },
  methods: {
    goOrderFun(){
      let arr ={
        id:this.currentId,
        num:this.value
      }
      this.$emit("currentBuy",arr)
      this.$router.push({ path:'/orderForm'})
    },
    collect() {
      this.isCollect = !this.isCollect;
    },
    addGoodsList() {
      // 1.判断当前的货物id是否存在购物车的数组arr中
      // 2.存在，则当前货物数量加一
      // 3.不存在，则加入arr中
      // let index = this.goodsList.findIndex( item.id == this.$route.query.id)
      // let arr = this.goodsList.filter((item) => {
      //   return item.id != this.$route.query.id;
      // });
      // let arr = this.$route.query.id;
      let arr ={
        id:this.$route.query.id,
        num:1,
      }

      if (this.goodsList) {
        let index = this.goodsList.findIndex(
          (item) => item.id == this.$route.query.id
        );
        if (index != -1) {
          this.goodsList[index].num += 1;
        } else {
          this.goodsList.push(arr);
        }
      } 
      else {
          this.goodsList.push(arr);

      }
      this.carNum = this.goodsList.length;
      console.log(this.goodsList);
      this.$emit('add-colect',this.goodsList)
    },
  },
};
</script>

<style lang="less" scoped>
.bottom {
  position: fixed;
  width: 100%;
  bottom: 0px;
  display: flex;
  border-top: 1px solid rgba(128, 128, 128, 0.61);
  border-bottom: 1px solid rgba(128, 128, 128, 0.61);
  z-index: 999;
  background-color: white;
  .sect {
    padding-top: 3px;
    color: rgba(129, 122, 122, 0.932);
    width: 150px;
    display: flex;
    font-size: 14px;
    div {
      flex: 0 0 50px;
      text-align: center;
    }
  }
  .car {
    position: relative;
    span {
      font-size: 12px;
      color: white;
      position: absolute;
      top: -3px;
      right: 1px;
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      text-align: center;
      line-height: 16px;
      background-color: red;
    }
  }
  .btn {
    flex: 1;
    display: flex;
    text-align: center;
    color: white;
    line-height: 42px;
  }
  .buy {
    flex: 1;
    height: 100%;
    background-color: #ffbe23;
  }
  .addCar {
    flex: 1;
    background-color: #f3554b;
  }
}
.icon-aixin1 {
  color: red;
}
</style>